<template>
  <view class="music_content_right">
    <view class="content_image">
      <image :src="song_image" mode=""></image>
    </view>
    <view class="song_singer">
      <!--歌曲名，歌手，是否收藏-->
      <view>
        <view>
          <text>{{song_title}}</text>
        </view>
        <text>{{songer}}</text>
      </view>
      <view class="">
        <image @click="loveimage" :src="lovesrc" style="width: 70rpx;height: 70rpx;"></image>
      </view>
    </view>

    <view class="song_word_all" v-if="song_show==true">
      <view class="song_word_after">
        <!-- 已经播放过的歌词 -->
        <text>{{arr_last}}</text>
      </view>
      <!-- 正在播放过的歌词 -->
      <!--  <view class="song_word_on"> 
        <text>大噶十分高大说法伽说法伽师分公司分管</text>
      </view> -->
      <!-- 还未播放过的歌词 -->
      <!--  <view class="song_word_before">  
        <text>雨，我是大雨</text>
      </view> -->
    </view>

    <view class="song_word" v-if="song_show==false">
      <p>暂无歌词</p>
    </view>

    <view class="song_play">
      <image @click="music_stop" :src="music_src"></image>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        clientX: 0,
        clientY: 0,
        song_image: this.$store.state.song_imgurl,
        song_title: this.$store.state.song_title,
        songer: this.$store.state.song_singer,
        user_love: this.$store.state.love_song,
        lovesrc: "/static/musicpage/like.png",
        music_src: "/static/musicpage/start.png",
        arr_last: '',
        setInte: "",
        song_show: true,
      }
    },
    onLoad() {
      uni.showToast({
        mask:true,
        ion:"none"
      })
      clearInterval(this.setInte)
      let store = this.$store.state
      if (store.love_song == true) {
        this.lovesrc = "/static/musicpage/like_fill.png"
        this.$store.commit('setLove_song', true)
        this.user_love = store.love_song
      } else if (store.love_song == false) {
        this.lovesrc = "/static/musicpage/like.png"
        this.$store.commit('setLove_song', false)
        this.user_love = store.love_song
      }
      let ss = uni.getBackgroundAudioManager()
      if (ss.paused == true) {
        this.song_src = ss.src //获取初始音源
        this.music_src = "/static/my/stop.png"
      } else if (ss.paused == false) {
        this.song_src = ss.src //获取初始音源
        this.music_src = "/static/my/play.png"
      } else {
        console.log('值为空')
      }
      if(uni.getStorageSync('song_history')==""){
        this.song_show==false
        console.log("暂无歌词")
      }else {
        let value=JSON.parse(uni.getStorageSync('song_history'))
        if(value.length==1){
          this.song_show==true
          this.arr_last=value[0].song_word
        }else if(value.length>1){
          this.song_show==true
          this.arr_last=value[value.length-1].song_word
        }else{
          console.log("没有任何历史记录")
        }
      }
      uni.hideToast()
    },
    onReady() { //只在第一次渲染时运行一次
      clearInterval(this.setInte)
      this.setInte = setInterval(async () => {
        let aa = uni.getBackgroundAudioManager()
        this.song_title = this.$store.state.song_title
        this.songer = this.$store.state.song_singer
        this.song_image = this.$store.state.song_imgurl
        if (aa.paused == true) {
          this.music_src = "/static/my/stop.png"
        } else if (aa.paused == false) {
          this.music_src = "/static/my/play.png"
        }
      }, 500)
    },
    methods: {
      loveimage() { //判断是否收藏歌曲
        console
        if (this.user_love == true) {
          this.lovesrc = "/static/musicpage/like.png"
          this.$store.commit('setLove_song', false)
          this.user_love = this.$store.state.love_song
        } else if (this.user_love == false) {
          this.lovesrc = "/static/musicpage/like_fill.png"
          this.$store.commit('setLove_song', true)
          this.user_love = this.$store.state.love_song
        }
      },
      // 按钮点击暂停播放，如无背景音乐对象直接播放页面传递来的参数歌源
      // 也是上一次的历史最后播放歌曲
      music_stop() {
        let aa = uni.getBackgroundAudioManager()
        if (aa.paused == true && this.song_src != '') {
          this.music_src = "/static/my/play.png"
          this.$store.commit('setSong_play_static', false)
          //播放歌曲
          aa.play()
        } else if (aa.paused == false) {
          this.music_src = "/static/my/stop.png"
          this.$store.commit('setSong_play_static', true)
          aa.pause()
        } else {
          this.music_src = "/static/my/play.png"
          //播放歌曲
          this.$music(this.song_src, this.song_title, this.songer, this.song_image)
        }
      },

    },
  }
</script>

<style lang="scss">
  @mixin _flex($flex) {
    display: flex;
    flex-direction: $flex;
  }

  @mixin text_scr {
    overflow-x: scroll;
    white-space: nowrap;
  }

  .music_content_right {
    /*右半部分显示歌词等*/
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    /*背景模糊图片样式*/
    .content_image {
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      position: absolute;
      z-index: -1;

      >image {
        position: absolute;
        left: 0;
        top: 80%;
        transform: translate(-50%, -50%);
        filter: blur(100px);
        width: 100%;
        height: 100%;
        filter: brightness(1);
        /* 设置亮度值，范围：0-1 */
        animation: imag 10s ease infinite;
      }

      @keyframes imag {
        0% {
          transform: rotate(0deg);
          filter: brightness(0.5) blur(50px);
        }

        20% {
          transform: rotate(-90deg);
          filter: brightness(1) blur(100px);
        }

        50% {
          transform: rotate(-180deg);
          filter: brightness(0.5) blur(50px);
        }

        75% {
          transform: rotate(-270deg);
          filter: brightness(1) blur(100px);
        }

        100% {
          transform: rotate(-360deg);
          filter: brightness(0.5) blur(50px);
        }
      }
    }

    >.song_singer {
      margin: 0;
      height: 12%;
      width: 95%;
      @include _flex(row) align-items: center;

      >view:nth-child(1) {
        width: 80%;
        text-align: left;
        margin: 0 50rpx;

        >view {
          line-height: 60rpx;
          text-align: left;
          width: 100%;
          @include _flex(column) @include text_scr font-size: 45rpx;
          height: 60rpx;
          color: white;

          /* 更改滚动条大小 */
          &::-webkit-scrollbar {
            width: 0;
            height: 0;
          }
        }

        >text:nth-child(2) {
          color: #7A7A7A;
          font-size: 30rpx;
        }
      }

      >view:nth-child(2) {
        padding: 10rpx;
        width: 20%;
        text-align: right;
      }
    }
    .song_word_all{
        width: 90%;
        height: 75%;
        margin: 0 7%;
        overflow-y: scroll;
        /* 更改滚动条大小 */
        &::-webkit-scrollbar {
          width: 0;
          height: 0;
        }
        text {
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      >.song_word_after {
        width: 100%;
        height: 75%;
        > text {
          color: #7A7A7A;
        }
      }

      >.song_word_on {
        width: 100%;
        height: 75%;
        text-align: left;

        > text {
          color: white;
        }
      }

      >.song_word_before {
        width: 100%;
        height: 75%;
        text-align: left;

        > text {
          color: #7A7A7A;
        }
      }
    }

    >.song_word {
      width: 100%;
      height: 75%;
      margin: 0 auto;
      font-size: 25rpx;
      text-align: center;
      color: #7A7A7A;
    }

    >.song_play {
      position: absolute;
      top: 90%;
      width: 95%;
      height: 12%;
      text-align: right;

      >image {
        width: 90rpx;
        height: 90rpx;
      }

    }

  }
</style>
